<template>
    <div class="terminal-data">
        <c-wrap title="运行数据">
            <div
                style="background-color: #26a2ff;height: 260px;display: flex;justify-content: center;align-items: center;">
                <div style="width: 200px;height:200px;border: dotted 1px white;border-radius: 100%;">
                    <div style="font-size: 13px;color: white;font-weight: lighter;margin-top: 20px;">
                        当前读数
                    </div>
                    <div style="margin-top: 35px;">
                        <span style="font-size: 35px;color: white;font-weight: bold;">{{realData.v01}}</span>
                        <span style="font-size: 12px;color: white;">m³</span>
                    </div>
                    <div style="font-size: 13px;color: white;font-weight: lighter;margin-top: 30px;">
                        {{realData.collectTime}}
                    </div>
                </div>
            </div>
            <div style="padding: 0 5px;display: flex;justify-content: space-between;align-items: center;">
                <div style="font-size: 12px;color: #888;">数据指标</div>
                <div @click="openHistory">
                    <icon clazz="icon-lishishuju" style="width: 20px;"></icon>
                </div>
            </div>
            <div style="background-color: white;display: flex;justify-content: space-around;flex-wrap:wrap;">
                <template v-for="(value,label,i) in realData.data">
                    <c-number :data="{value:value,label:label}" :width="width/3 + 20"></c-number>
                    <div v-if="i%2===0" style="height: inherit;width: 1px;background-color: rgb(240, 240, 240);"></div>
                </template>
            </div>
        </c-wrap>

        <!-- 历史数据 -->
        <mt-popup v-model="modal.type==='history'" position="bottom" :closeOnClickModal="false">
            <div :style="{height:height+'px',width:width+'px'}">
                <div style="font-size: 16px;font-weight: bold;text-align: right;padding: 5px 15px 0;"
                     @click="closeHistory">
                    <span>x</span>
                </div>
                <!-- 表头 -->
                <div>
                    <table style="font-size: 12px;" :style="{width:width+'px'}">
                        <caption style="padding-bottom: 5px;">日期：{{historyData.caption}}</caption>
                        <colgroup>
                            <col v-for="(column, i) in historyData.columnList" :key="i"
                                 :style="{width:column.width+'px'}"/>
                        </colgroup>
                        <thead>
                        <tr style="background-color: rgb(240, 240, 240);">
                            <td v-for="(column, i) in historyData.columnList" :key="i" style="padding: 5px 2px;">
                                {{column.label}}
                            </td>
                        </tr>
                        </thead>
                    </table>
                </div>
                <!-- 表体 -->
                <div v-if="historyData.dataList && historyData.dataList.length>0" style="overflow-y:scroll;"
                     :style="{height:(height-91)+'px'}">
                    <table style="font-size: 12px;border-collapse:collapse;" :style="{width:width+'px'}">
                        <colgroup>
                            <col v-for="(column, i) in historyData.columnList" :key="i"
                                 :style="{width:column.width+'px'}"/>
                        </colgroup>
                        <tbody>
                        <template>
                            <tr v-for="(data, j) in historyData.dataList" :key="j"
                                style="border-bottom: solid 1px rgb(240, 240, 240);">
                                <td v-for="(column, k) in historyData.columnList" :key="k" style="padding: 5px;">
                                    {{data[column['code']]}}
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
                <div v-if="!historyData.dataList || historyData.dataList.length<=0" style="margin-top: 100px;">
                    {{historyData.tip}}
                </div>
            </div>
        </mt-popup>
    </div>
</template>

<script>
    import CWrap from '../../components/CWrap'
    import CNumber from '../../components/CNumber'

    export default {
        name: "terminalData",
        components: {CWrap, CNumber},
        data() {
            return {
                realData: {
                    v01: '',
                    collectTime: '',
                    data: {}
                },
                historyData: {
                    caption: '',
                    columnList: [],
                    dataList: [],
                    tip: '暂无数据'
                },
                modal: {
                    type: ''
                },
                height: app.config.setting.height.display - app.config.setting.height.top - app.config.setting.height.bottom - 20,
                width: document.body.clientWidth - 30
            }
        },
        methods: {
            loadData() {
                let terminalId = app.util.localStorage('terminalId');
                if (!terminalId) {
                    this.$toast('关联户号获取失败，请重新切换户号！');
                    return;
                }
                app.ajax.get(app.config.api.terminal.data + '/' + terminalId, {}, (res) => {
                    res.data.collectTime = app.util.formatDate(res.data.collectTime, 'yyyy-MM-dd hh:mm:ss');
                    Object.assign(this.realData, res.data);
                });
            },
            loadHistoryData() {
                this.historyData.tip = '数据加载中...';
                app.ajax.get(app.config.api.terminal.dataHistory + '/' + app.util.localStorage('terminalId'), {}, (res) => {
                    if (res.data && res.data.columnList) {
                        res.data.columnList.forEach((column) => {
                            let width = 50;
                            if (column.digit && column.digit.indexOf(".") > -1) {
                                let digitArr = column.digit.split(".");
                                width += Number(digitArr[0]) + Number(digitArr[1]);
                            }
                            column.width = width;
                        });
                    }
                    if (res.data.dataList) {
                        res.data.dataList.forEach((data) => {
                            data.collectTime = app.util.formatDate(data.collectTime, 'yyyy-MM-dd hh:mm:ss');
                        });
                        this.historyData.tip = '';
                    } else {
                        this.historyData.tip = '暂无数据';
                    }

                    Object.assign(this.historyData, res.data);
                });
            },
            openHistory() {
                this.modal.type = 'history';

                this.loadHistoryData();
            },
            closeHistory() {
                this.modal.type = '';
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>

<style>
    .terminal-data .mint-popup-bottom {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
</style>
